import { React, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserInfo } from '@/store/modules/user';
import { useEffect } from 'react';
import dayjs from 'dayjs';
import { DatePicker, Form, Input, Select, Button, message, Upload } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { updateProfileAPI } from '@/apis/user'

import './index.scss'



const { TextArea } = Input;

const Mine = () => {

  const dispatch = useDispatch();
  const [selectedDate, setSelectedDate] = useState();
  //得到数据
 
  const [form] = Form.useForm();
 
  useEffect(() => {
    dispatch(fetchUserInfo());
  }, [dispatch]);
  const data = useSelector((state) => state.user.userInfo);
  // console.log(data);
  const { name, gender, birthday, intro,photo } = data
  let defaultValue = dayjs(birthday)
  const [imageUrl,setImageUrl] = useState()
  const [count,setCount] = useState(1)
  useEffect(()=>{
    if (data) {
      //进行数据回填
      form.setFieldsValue({ name, gender: gender === 0 ? '男' : '女', intro });
      //回填照片
      console.log(photo);
      let url = [{
        uid: '-1',
        name: 'image1.png',
        status: 'done',
        url:data.photo,
        description: '这是第一张图片'
      }]
      console.log(url);
      setImageUrl(url)
      
  }},[data])
  
  const handleSave = () => {
    // 获取表单数据
    const formData = form.getFieldsValue();
    // 调用 接口更新数据
    console.log(formData);
    const { name, gender, intro } = formData
    const reqbody = {
      name,
      gender: gender === '男' ? 0 : 1,
      birthday: selectedDate,
      real_name: '',
      intro,
    }
    updateProfileAPI(reqbody).then((res) => {
      console.log(res)
      message.success('保存成功')
    })
  };

  const getDate = (_, dateStr) => {
    setSelectedDate(dateStr)
  };
    const onChange = (value) => {
      // console.log('正在上传', value);
      setImageUrl(value.fileList)
      // console.log('11111',value.fileList.length);
      setCount(value.fileList.length)
    }

  return (
    <div style={{width:'100%',height:'100%'}} className='back'>
      <Form
        form={form}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        style={{
          maxWidth: 600,
          margin: 'auto',
          backgroundColor:'white',
          position:'relative',
          top:'10%',
          borderRadius:'20px'
        }}
        onFinish={handleSave}
      >
        <Form.Item label="头像">
          {/* <img src='https://uploadfile.bizhizu.cn/2015/0518/20150518032433289.jpg' style={{ width: '100px', height: '100px', borderRadius: '100px' }}></img> */}
        
        <Upload
               name="avatar"
              listType="picture-circle"
              className="avatar-uploader"
              showUploadList
              action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
              onChange={onChange}
              maxCount={1}
              fileList={imageUrl}
            >
              {count===0?<div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>:''}
            </Upload>
            </Form.Item> 
        <Form.Item label="名字" name="name">
          <Input />
        </Form.Item>
        <Form.Item label="性别" name="gender">
          <Select>
            <Select.Option value="0">男</Select.Option>
            <Select.Option value="1">女</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="生日"
        >
          <DatePicker defaultValue={defaultValue} key={defaultValue} onChange={getDate} />
        </Form.Item>
        <Form.Item label="个人介绍" name="intro">
          <TextArea rows={4} />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{
              marginLeft: '220px',
            }}
            htmlType="submit" // 将按钮类型设置为 submit，点击按钮会触发表单提交
          >
            保存信息
          </Button>
        </Form.Item>
      </Form>

    </div>
  );
};

export default () => <Mine />;